<template>
  <div class="niaojian">

    <div class="aui-bar aui-bar-nav aui-barPailuan">
      <!--<a class="aui-pull-left aui-padded-l-15 icon iconfont icon-fanhuijiantou1 " style="color:#0075f0 !important;" @click="goBack()">-->
      <!--<div style="color: black;margin-left: 1rem">排卵</div>-->
      <!--</a>-->
      <a class="aui-pull-left">
        <img style="width: 2.5rem;;" src="../../../../static/img/back-b.png" alt=""  @click="goBack()">
        <div >
        <span style="margin-top:-0.85rem;left:4.5rem;position: absolute;color: black; font-size: 18px;	font-family: 'Helvetica Neue', Helvetica, sans-serif;">
              尿检
            </span>
        </div>
      </a>
    </div>
    <section class="sectionMagin">
      <div class="ConnectStatus" v-if="ConnectStatus==false"> 正在连接中 </div>
      <div class="aui-padded-t-10 aui-padded-b-10">
        <img class="yunqielementImg" src="../img/img_niaojian_one.png" alt="">
      </div>
      <div class="aui-flex-col aui-flex-item-12 aui-text-center listTit">
        <div style="width:90%;margin:0 5%">
          <div class="aui-flex-item-4">检验日期</div>
          <div class="aui-flex-item-4">检验结果</div>
          <div class="aui-flex-item-4">结果描述</div>
        </div>
      </div>

      <div class="aui-flex-col aui-flex-item-12 aui-text-center list  niaojian-list" v-for="Urine in UrineARR.data">
        <div class="aui-flex-item-4 aui-padded-t-5 aui-font-size-14" @click="goResutl(Urine.NJdetetioniData)">
          <div>{{Urine.group_data}}</div>
          <div>{{Urine.create_time}}</div>
        </div>
        <div class="aui-flex-item-4" @click="goResutl(Urine.NJdetetioniData)" >点击查看结果</div>
        <div class="aui-flex-item-4" @click="goResutl(Urine.NJdetetioniData)" >点击查看描述</div>
      </div>
      <div style="clear: both"></div>

      <div class="bHint bottomBtn">
        <div class="aui-font-size-12 aui-text-center aui-margin-b-10 textColor">
          注：此纪录仅保存最近三次的检测结果。<br />
          准备就绪了吗？小普将开始为您进行尿液检测
        </div>
        <div @click="goPath('/niaojianfirst')" class="aui-btn SubBtnNiaojian">开始检测</div>
      </div>

    </section>
    <JianCeConnect v-if="JianCeConnect"></JianCeConnect>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'
  import JianCeConnect from '../../common/JianCeConnect'

export default {
  name: 'NiaoJian',
  data () {
    return {
      exitTime:0,
      JianCeConnect:false
    }
  },
  computed: {
    ...mapState([
      'ConnectStatus',
      'UrineARR'
    ])
  },
  components: {
    Loading,
    JianCeConnect
  },
  created(){
    window.hilink.setTitleVisible(false)
  },
  methods: {
    ...mapMutations([ 'setNJdetetioniData'
    ]),
    goResutl(arr){
      this.setNJdetetioniData({arrnj:arr})
      this.$router.push('/niaojianforth')
    },
    goBack(){
      if(this.ConnectStatus==false){
        this.JianCeConnect = true
        return
      }
      this.$router.push('/index')
    },
    goPath (pth) {
      if(this.ConnectStatus==false){
        this.JianCeConnect = true
        return
      }
      this.$router.push({path:pth})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .headerDiv{
    height: 2rem;
    width: 100%;
    /*background-color: #288af0;*/
  }

  .bodyBg{
    background: #ffffff;
  }
  .aui-barPailuan{
    border-bottom: 2px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px!important;
    font-weight: bold!important;
  }

  .yunqielementImg{margin:auto}
  .listTit{
    background: #f4f4f4;
    height:2rem;
    line-height: 2rem;
  }
  .list{
    width:90%;
    margin:0 5%;
    /*height:2.5rem;*/
    border-bottom: 1px solid #ccc;
  }
  .bHint{
    margin-top: 10rem;
    width:100%;
    /*position: absolute;*/
    /*bottom:1rem;*/
  }
  .SubBtnNiaojian{
    width: 90%;
    height: 3rem!important;
    line-height: 3rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1.2rem!important;
    border: 1px solid #eee;
    border-radius: 1.5rem!important;
    background: #f7f7f7!important;
  }
  .textColor{
    color:#ccc;
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
  .ConnectStatus{
    text-align: center;
    color: red;
  }
  .aui-bar{
    padding-top: 25px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
  }
  .aui-bar a{
    padding: 0 !important;
    /*padding-bottom: 1px !important;*/
    /*padding-left: 30px !important;*/
    /*padding-right: 30px !important;*/

  }
</style>
